<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="email=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="renderer" content="webkit">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-title" content="Amaze UI" />
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>[简历]蔡宛玲-中山大学南方学院/广州</title>
		<link rel="shortcut icon" href="assets/images/bilibili-line.svg" type="image/x-icon">
		<link rel="stylesheet" href="assets/css/typo.css">
		<link rel="stylesheet" href="assets/css/font-awesome.min.css">
		<link rel="stylesheet" href="assets/css/index.css">

	</head>

	<body>

		<header class="header"></header>

		<article class="container">
			<section class="side" id="side">

				<!-- 左栏固定开关，记得及时删除这段代码 Start-->
				<label class="switch" style="display: none;" onchange="switchFixed()">
					<script type="text/javaScript">
						function switchFixed(){
                        var value = document.getElementById('side').style.position === 'fixed' ? 'absolute' : 'fixed';
                        document.getElementById('side').style.position = value;
                    }
                </script>
					<input id="cb" type="checkbox">
					<span class="slider round"></span>
				</label>
				<style>
					@media (min-width: 750px) {
						.switch {
							position: relative;
							display: inline-block !important;
							width: 60px;
							height: 34px;
						}

						.switch input {
							display: none;
						}

						.slider {
							position: absolute;
							cursor: pointer;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							background-color: #ccc;
							-webkit-transition: .4s;
							transition: .4s;
						}

						.slider:before {
							position: absolute;
							content: "";
							height: 26px;
							width: 26px;
							left: 4px;
							bottom: 4px;
							background-color: white;
							-webkit-transition: .4s;
							transition: .4s;
						}

						input:checked+.slider {
							background-color: #1abc9c;
						}

						input:focus+.slider {
							box-shadow: 0 0 1px #1abc9c;
						}

						input:checked+.slider:before {
							-webkit-transform: translateX(26px);
							-ms-transform: translateX(26px);
							transform: translateX(26px);
						}

						.slider.round {
							border-radius: 34px;
						}

						.slider.round:before {
							border-radius: 50%;
						}
						.avatar{
							height: auto;
							max-width: 100%;
					    }
						body{
							background-image: linear-gradient(skyblue,pink);
							/* 背景颜色渐变 */
						}
						progress{
							 transition: 1s;
						}
						progress:hover{
							/* 添加hover事件,鼠标移入进度条上移且有阴影效果 */
							transform: translateY(-6px);
							box-shadow: 1px 2px rgba(0,0,0,.2);
						}
						.fa{
							transition: 1s;
						}
						.fa:hover{
							/* 给图标添加先转事件 */
							transform: rotateZ(360deg);
						}
						.side{
							background-color: powderblue !important;
						}
						.main{
							background-color: #FFFDD1 !important;
						}
					}
				</style>
				<!-- 左侧固定开关，记得及时删除这段代码 End-->

				<!-- 个人肖像 -->
				<section class="me">
					<section class="portrait">
						<div class="loading">
							<span></span>
							<span></span>
							<span></span>
							<span></span>
							<span></span>
						</div>

						<!-- 头像照片 -->
						<img class="avatar" src="assets/images/avatar.jpg" id="headImg">
						<script type="text/javascript">
							headImg.onload = function() {
								// 图片加载事件,判断图片是否加载
								document.getElementsByClassName('avatar')[0].style.display = 'block';
								document.getElementsByClassName('loading')[0].style.display = 'none';
							}
						</script>
					</section>

					<h1 class="name">蔡宛玲</h1>
					<h4 class="info-job">中山大学南方学院/ 广州</h4>
                    <br>
                <audio src="assets/music/赵雷-鼓楼.mp3" controls="controls"></audio></br>
				</section>

				<!-- 基本信息 -->
				<section class="profile info-unit">
					<h2>
						<i class="fa fa-id-card-o" aria-hidden="true"></i>基本信息</h2>
					<hr />
					<ul>
						<li>
							<label>个人信息</label>
							<span>蔡宛玲 / 女 / 22岁</span>
						</li>
						<li>
							<label>英语水平</label>
							<span>CET-4</span>
						</li>
						<li>
							<label>普通话水平</label>
							<span>二级甲等</span>
						</li>
						<li>
							<label><mark>每个标题前</mark></label>
							<span><mark>ICON触发旋转~</mark></span>
						</li>
					</ul>
				</section>

				<!-- 联系方式 -->
				<section class="contact info-unit">
					<h2>
						<i class="fa fa-user-circle" aria-hidden="true"></i>联系方式</h2>
					<hr />
					<ul>
						<li>
							<label>手机</label>
							<a href="tel:18845953620" target="_blank">18845953620</a>
						</li>
						<li>
							<label>邮箱</label>
							<a href="2548898824@qq.com" target="_blank">2548898824@qq.com</a>
						</li>
					</ul>
				</section>

				<!-- 技能点 -->
				<section class="skill info-unit">
					<h2>
						<i class="fa fa-wpexplorer" aria-hidden="true"></i>技能点【此处横条有触动效果】</h2>
					<hr />
					<ul>
						<li>
							<label>Axure</label>
							<progress value="100" max="100"></progress>
						</li>
						
						<li>
							<label>产品分析</label>
							<progress value="100" max="100"></progress>
						</li>
						<li>
							<label>Tableau</label>
							<progress value="98" max="100"></progress>
						</li>

						<li>
							<label>HTMl</label>
							<progress value="95" max="100"></progress>
						</li>
						<li>
							<label>私域运营</label>
							<progress value="96" max="100"></progress>
						</li>
					</ul>
				</section>

				<section class="qrcode info-unit">
					<h2><i class="fa fa-qrcode" aria-hidden="true"></i>二维码</h2>
					<hr />
					<img src="./assets/images/QR.jpg" style="width: 100%;"
					 alt="">
				</section>

				<!-- 技术栈 -->
				<!-- <div class="stack info-unit">
                    <h2><i class="fa fa-code" aria-hidden="true"></i>其他</h2>
                    <hr/>
                    <ul>
                        <li>
                            <label>前端</label>
                            <span>React、jQuery、微信小程序、Bootstrap、SASS、LESS</span>
                        </li>
                        <li>
                            <label>后端</label>
                            <span>Node.js、MySQL、MongoDB、WordPress、ThinkPHP</span>
                        </li>
                        <li>
                            <label>其他</label>
                            <span>Git、SVN、Markdown</span>
                        </li>
                    </ul>
                </div> -->
			</section>

			<main class="main">

				<!-- 教育经历 -->
				<section class="edu info-unit">
					<h2>
						<i class="fa fa-cube" aria-hidden="true"></i>教育经历</h2>
					<hr />
					<ul>
						<li>
							<h3>
								<address> 中山大学南方学院（现广州南方学院）</address>
								<time>2020.9至2023.6</time>
							</h3>
							<p>
								<mark>主修课程：</mark>产品经理能力培养，新媒体产品功能设计与原型制作，新媒体数据分析与应用，信息可视化设计，网页设计与制作，数字媒体技术与协作，用户与视觉界面设计，用户研究</p>
						</li>

					</ul>
				</section>

				<!-- 工作经历 -->
				<section class="work info-unit">
					<h2>
						<i class="fa fa-folder-open-o" aria-hidden="true"></i>专业技能</h2>
					<hr />
					<ul>
						<li>
							<h3>
								<span>[技能1]熟练使用Axure原型软件</span>
								
							</h3>
							<ul class="info-content">
								<li>设计qq音乐每日推荐音乐模块
									</li>
							</ul>
						</li>
						<li>
							<h3>
								<span>[技能2]独立进行产品需求分析</span>
								
							</h3>
							<ul class="info-content">
								<li>基于普通话考证APP需求分析
									</li>
							</ul>
						</li>
<li>
							<h3>
								<span>[技能3]掌握tableau软件并制作信息可视化图表</span>
								
							</h3>
							<ul class="info-content">
								<li>NBA赛况信息可视化数据分析方案
									</li>
							</ul>
						</li>
						<li>
							<h3>
								<span>[技能4]精通Photoshop/Adobelllustator等软件</span>
								
							</h3>
							<ul class="info-content">
								<li>完成趣味普通话APP-UI设计
									</li>
							</ul>
						</li>
						<li>
							<h3>
								<span>[技能5]私域运营</span>
								
							</h3>
							<ul class="info-content">
								<li>女团成员后援会运营负责人
									</li>
							</ul>
					</ul>
				</section>

				<!-- 项目经验 -->
				<section class="project info-unit">
					<h2>
						<i class="fa fa-terminal" aria-hidden="true"></i>项目经历</h2>
					<hr />
					<ul>
						<li>
							<h3>
								<span>[项目1]趣味普通话app产品设计</span>
								<span class="link">
									<a href="#" target="_blank">Demo</a>
								</span>
								<time>201X.X-201X.X</time>
							</h3>
							<ul class="info-content">
								
								<li>
									<i class="fa fa-paper-plane-o" aria-hidden="true"></i>
									[背景]为了解决普通话考级人群，达成更好的普通话考级结果的问题，设计一款普通话学习app
									<br />
									<i class="fa fa-users" aria-hidden="true"></i>
									[团队]个人
									<br />
									<i class="fa fa-bars" aria-hidden="true"></i>
									[贡献]1.进行竞品分析，主要分析了普通话学习APP竞品，获取用户的朗读体验/公开课学习模块功能设计/我的页面中广告推送等模块中优秀的产品设计；
2.测试功能模块：设计了模拟线下/题海测试/PK测试/专项测试这个测试功能模块，帮助用户解决练习/学习普通话的需求；
3.学习课程模块：为了给用户提供系统化的学习方案，提供普通话课程购买服务，并完成整个购买流程链路设计；
4.广场交流模块：为了满足用户分享学习交流经验的需求，设计普通话广场设计，用户可以自行发贴进行学习内容分享，并支持点赞/评论/转发功能。

									<br />
									<i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
									[结果]完成了需求文档的设计</li>
							</ul>
						</li>
						<li>
							<h3>
								<span>[项目2]qq音乐每日推荐音乐模块功能设计</span>
								<span class="link">
									<a href="#" target="_blank">Demo</a>
								</span>
								<time>201X.X-201X.X</time>
							</h3>
							<ul class="info-content">
								
								<li>
									<i class="fa fa-paper-plane-o" aria-hidden="true"></i>
									[背景]针对想要快速听自己的喜欢歌曲的用户，设计每日推荐歌曲模块
									<br />
									<i class="fa fa-users" aria-hidden="true"></i>
									[团队]个人
									<br />
									<i class="fa fa-bars" aria-hidden="true"></i>
									[贡献]1.首页每日推荐入口设计
2.推荐歌曲详情面功能设计：根据智能算法推荐将用户可能喜欢的音乐在页面中展示，并支持点赞/收藏/转发等功能；
3.为了提升用户的转发/分享意愿，设计不同的分享卡片UI设计；
4.为了更好的提升用户体验，设计每日推荐历史浏览记录功能。


									<br />
									<i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
									[结果]完成了qq音乐每日推荐的全部功能设计</li>
							</ul>
						</li>
						<li>
							<h3>
								<span>[项目3]NBA球队信息可视化数据分析方案</span>
								<span class="link">
									<a href="#" target="_blank">Demo</a>
								</span>
								<time>201X.X-201X.X</time>
							</h3>
							<ul class="info-content">
								
								<li>
									<i class="fa fa-paper-plane-o" aria-hidden="true"></i>
									[背景]为了让想要了解NBA赛况的人，通过这个方案掌握赛况与球队胜负对比信息
									<br />
									<i class="fa fa-users" aria-hidden="true"></i>
									[团队]本人进行了数据分析与图标制作
									<br />
									<i class="fa fa-bars" aria-hidden="true"></i>
									[贡献]1.赛制介绍：在链接中，采用棒棒糖图、颜色编码方式，对各个球队之间的比赛日程进行可视化展示，清晰地呈现不同球队比赛时间和对手等信息，方便观看者了解NBA赛制的规则和安排；
2. 球队胜负对比信息数据论证：利用突出显示表、地理图、条形图等方式，对各支球队的胜率、排名和场次等数据信息进行了针对性的分析和展示。同时着重介绍了前三名球队爵士、湖人、快船所处地理位置；
3.球队胜负自身对比：运用圆饼图、折线图、蝴蝶图形式分别针对热火队和奇才队，进行了其赛初与近期自身输赢对比——均有奋起直追的趋势。


									<br />
									<i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
									[结果]完成了数据分析方案，让观看者对已有的赛况和球队信息更多了解</li>
							</ul>
						</li>

					</ul>
				</section>
							 <section class="others info-unit">
                <h2>
                    <i class="fa fa-paint-brush" aria-hidden="true"></i>个人小兴趣</h2>
        <hr />
        </section>
                   <select>
  <optgroup label="48">   <!--加分项optgroup标签的使用  --> 
    <option value="GNZ48">GNZ48</option>
    <option value="BEJ48">BEJ48</option>
	<option value="SNH48">SNH48</option>
  </optgroup>
  <optgroup label="方言">
    <option value="东北话">东北话</option>
    <option value="上海话（？）">上海话（？）</option>
  </optgroup>
 </select>
 
    
				<h2> <hr/> 
					<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>对我的评价/意见【一个CSS样式fa-spin实现icon自转小彩蛋~】</h2>   <!-- 此处运用了CSS样式fa-spin实现 他人评价前图标自己即可旋转 -->
				<div style="margin-center:45%">  
					<input type="likeit" value> <!-- 此处运用了input标签 增加了一个文本输入框 和一个按钮 -->
				</div>
				<form>
					<input type="button" id="Answer" value="Answer">
				</form>
				<!-- 自我评价 -->
				<section class="work info-unit">
					<h2>
						<i class="fa fa-pencil" aria-hidden="true"></i>自我评价/期望</h2>
					<hr />
					<p>
						<span class="mark-txt">“积极探索新兴事物”</span>在工作和生活中态度积极向上，愿通过自己富有激情、积极主动的努力实现自身价值并在工作中做出贡献。面对互联网新兴事物——人工智能 Chat GPT，对其进行了多次摸索和自主尝试</p>
				</section>
			</main>

                
    </article>

		</article>



		<footer class="footer">
			<p>© 2023 蔡宛玲.文档最后更新时间为
				<time>2023年06月14日</time>.</p>
		</footer>

		<!-- 侧栏 -->
		<aside>
			<ul>
				<li>
					<a href="https://gitee.com/itsay/resume" target="_blank">源代码</a>
				</li>
				<li>
					<a href="https://cai-wl.gitee.io/damalu01/" target="_blank">我古早的Web</a>
				</li>
			</ul>
		</aside>
		<script src="./assets/js/index.js"></script>

	</body>

</html>
